<template>
  <el-row :gutter="20" class="courses">
    <el-col :span="6" v-for="course in courses" :key="course.title">
      <el-card shadow="hover">
        <img :src="course.image" alt="课程图" class="course-img" />
        <h3>{{ course.title }}</h3>
        <p>{{ course.description }}</p>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import softwareImg from '@/assets/software.jpg';
import signalImg from '@/assets/signal.jpg';
import networkImg from '@/assets/network.jpg';
import structureImg from '@/assets/structure.jpg';

const courses = [
  { title: '软件工程', description: '介绍软件开发与工程问题。', image: softwareImg },
  { title: '数字信号处理', description: '数字信号的变换与滤波。', image: signalImg },
  { title: '计算机网络', description: '通信协议与网络系统。', image: networkImg },
  { title: '数据结构', description: '数据的存储结构与操作。', image: structureImg }
];
</script>

<style scoped>
.courses {
  margin-top: 30px;
}
.course-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}
</style>




